<template>
	<view class="confirm-order">
		<view class="goods">
			<text>商品信息</text>
			<course-item :item="course"></course-item>
		</view>
		
		<view class="option-pay card">
			<view class="title">支付方式</view>

			 <radio-group @change="radioChange">
				 <!-- 微信支付选项 -->
				<label class="pay-item center space-between" >
					<view class="left center">
						<image src="/static/pay/wxpay.png"></image>
						<text>微信支付</text>
					</view>
					<radio value="wxpay" :checked="provider === 'wxpay'" style="transform:scale(0.8)"/>
				</label>
			
			</radio-group>
		</view>
		
		<view class="card price">
			<view class="space-between">
				<text>商品金额</text>
				<!-- 原价或套餐总原价 -->
				<text>￥{{course.priceOriginal || course.totalPrice}}</text>
			</view>
			<view class="space-between" v-if="course.priceDiscount || course.groupPrice">
				<text>优惠价</text>
				<!-- 优惠价-->
				<text>￥{{course.priceDiscount || course.groupPrice}}</text>
			</view>
		</view>
		<!-- 占位底部 -->
		<view style="height: 130rpx;"></view>
		
		<view class="pay space-between">
			<view>
				<text class="grey">实付金额：</text>
				<text>{{payPrice}}</text>
			</view>
			<view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" :loading="loading":disabled="loading"  @click="wxPayHandler">立即支付</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	// 课程框
	import courseItem from '@/components/common/course-item.vue'
	
	import api from '@/api/order.js'
	
	
	export default {
		
		components: {courseItem},
		
		data() {
			return {
				course: {}, // 商品信息
				provider: '', // 选择支付方式
			}
		},
		computed: {
			// 支付金额
			payPrice() {
				return this.course.priceDiscount || this.course.groupPrice || this.course.priceOriginal || this.course.totalPrice
			},
		},
		
		onLoad(option) { 
		
		
			// 微信小程序不需要转义
			if(option.course) this.course = JSON.parse(decodeURIComponent(option.course));
			if(option.courseGroup) this.course = JSON.parse(decodeURIComponent(option.courseGroup));
			
			// 微信小程序选中微信支付
			this.provider = 'wxpay'
		
			
		},
		
		
		methods: {

			// 获取支付渠道
			radioChange(event) {
				// console.log('event', event)
				this.provider = event.detail.value
			},
			
	     
			// 如果是手机登录的用户，需要登录微信小程序获取用户openid，根据openid获取预支付订单信息
			loginWeixinMp() {
				return new Promise((resolve, reject)=>{
					// 1. 先获取用户code，再获取openid
					uni.login({
						provider: 'weixin',
						success: async (res) => {
							console.log('微信登录code：', res.code)
							// 2. 再获取 openid, 调用后台服务接口
							let { data } = await api.getUserOpenid(res.code)
							console.log(data);
							// let openid = 'xxx'
							uni.setStorageSync('openid', data.openid)
							resolve(data.openid)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			
			//微信小程序支付
			async wxPayHandler() {
				this.loading = true
				// 1. 登录微信小程序，获取code, 再获取 openid
				let  userid = uni.getStorageSync('userInfo').id
				let openid = uni.getStorageSync('userInfo').openid
				// console.log('获取已登陆openid：', userid)
				// if(!openid) {
				// 	try{
				// 		openid = await this.loginWeixinMp()
				// 	}catch(e){
				// 		console.error("openid获取错误：",e)
				// 	}
				// 	if( !openid ) {
				// 		uni.showModal({
				// 			content: '获取openid失败',
				// 			showCancel: false
				// 		})
				// 		this.loading = false
				// 		return
				// 	}
				// }

				// 2. 通过 openid 调用后台服务接口创建订单信息(返回订单号id)
				// 调用getOrderInfo方法,使用接口发送请求
				let  { message , data , code}  = await this.getOrderInfo({ course: this.course ,userid: userid })
				
				if( code == 20000 ) {
					uni.showModal({
						content: message ,
						success: async  (res) => {  
							  if (res.confirm) {
								  
									// 3 支付调用接口
								  	let { message, code } = await api.orderPay({ course: this.course , userid , orderid : data.orderid})
									if( code == 20000) {
										uni.showToast({ title: '支付成功！'})
										// 跳转到订单页
										this.navTo('/pages/order/order')	
									}
							  } else {
								  this.navTo('/pages/order/order')
							  }
						}
					})
					
				}
				
				
				if( code == 40000 ) {
					uni.showModal({
						content: '有订单未支付',
						showCancel:false,
						success : (res) => {  
							  if (res.confirm) this.navTo('/pages/order/order')		
							  }
					})
					
				}
				
				
				
			},
			
		
			// 通过openid获取预支付订单信息
			getOrderInfo(option) {
				return new Promise( async (resolve, reject) => {
						 let data = await api.getOrderInfoWxpay(option)
						resolve(data)
						return
				
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.confirm-order {
		font-size: 29rpx;
		color: #333;
	}
	.goods {
		padding: 20rpx 30rpx 0 30rpx;
		background-color: #FFFFFF;
	}
	
	.card {
		padding: 0 30rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		box-shadow: 1px 0 5px 0 rgba(0,0,0, 0.08);
		border-radius: 20rpx;
	}
	.option-pay {
		.title {
			line-height: 90rpx;
			border-bottom: $mxg-underline;
		}
		.ios {
			line-height: 90rpx;
			text:last-child{
				color: $mxg-text-color-red;
			}
		}
		.pay-item {
			line-height: 90rpx;
			.left {
				image {
					width: 60rpx;
					height: 60rpx;
				}
				text{
					font-size: 33rpx;
					padding-left: 20rpx;
				}
			}
			
		}
	}
	
	.price {
		>view {
			line-height: 90rpx;
			border-bottom: 1px solid #F8F9FB;
		}
	}
	
	.pay {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		border-top: $mxg-underline;
		view:first-child >text:last-child {
			color: $mxg-text-color-red;
			font-size: 35rpx;
		}
		.btn {
			background-color: $mxg-color-primary;
			color: #FFFFFF;
			border-radius: 50rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			&::after {
				// 加载中隐藏边框
				border: none;
			}
		}
	}
</style>
